<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Chat App</title>
        <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    </head>
    <body>
        <div class="container">
            <div class="chat-container">
                <div class="menu-bar">
                    <div class="menu-title"></div>
                    <div>
                        <button class="menu-button" onclick="onTileClick()">
                            <img src="{{ url_for('static', filename='icons/menu-svgrepo-com.svg') }}" class="icon"/>
                        </button>
                    </div>
                </div>
                <div class="chat-box" id="chat-box">
                    <div class="row">
                        <img src="{{ url_for('static', filename='images/' + options.avatars.assistant + '.png') }}" class="avatar"/>
                        <div class="message assistant">
                            {% if current_robot %}
                            {{ current_robot_data.introduction or ('你好，我是' + current_robot_data.botname + '！') }}
                            {% else %}
                            欢迎使用小助手！
                            {% endif %}
                        </div>
                    </div>
                    {% for message in messages %}
                    <div class="row">
                        {% if message.role == 'system' %}
                        <div class="tool-call">
                            <span class="tool-name">system</span>
                            <span class="tool-result" title="{{ message.content }}">- {{ message.content }}</span>
                        </div>
                        {% elif message.role == 'tool' %}
                        <div class="tool-call"{% if loop.last %} id="last-tool-result"{% endif %}>
                            <span class="tool-name">{{ message.name }}</span>
                            <span class="tool-result" title="{{ message.content }}">- {{ message.content }}</span>
                        </div>
                        {% else %}
                        {% if message.content or not message.tool_calls %}
                        <img src="{{ url_for('static', filename='images/' + options.avatars[message.role] + '.png') }}" class="avatar">
                        <div class="message {{ message.role }}"{% if loop.last %} id="last-content"{% endif %}>
                            {{ markdown(message.content)|safe }}
                        </div>
                        {% endif %}
                        {% if message.tool_calls %}
                        <div{% if loop.last %} id="last-tool-call"{% endif %}>
                        {% for tool_call in message.tool_calls %}
                        {% if tool_call.type == 'function' %}
                        <div class="tool-call">
                            <span class="tool-name">{{ tool_call.function.name }}</span>
                            <span class="tool-arguments" title="{{ tool_call.function.arguments }}">({{ tool_call.function.arguments }})</span>
                        </div>
                        {% endif %}
                        {% endfor %}
                        </div>
                        {% endif %}
                        {% endif %}
                    </div>
                    {% endfor %}
                    {% if choices_ready and phase == 'idle' %}
                    <div class="row" id="choices-list">
                        {% for choice in choices %}
                        <form class="inline" action="/send_message" method="post">
                            <input type="text" name="query" class="hidden" value="{{ choice }}" autocomplete="off"/>
                            {% if current_robot %}
                            <input type="text" name="robot" id="current-robot" class="hidden" value="{{ current_robot }}" autocomplete="off"/>
                            {% endif %}
                            {% if current_thread %}
                            <input type="text" name="thread" class="hidden" value="{{ current_thread }}" autocomplete="off"/>
                            {% endif %}
                            <input type="submit" class="choice-button" title="{{ choice }}" value="{{ choice }}"/>
                        </form>
                        {% endfor %}
                        {% if not current_thread %}
                        <div class="inline">
                            <button class="choice-button" onclick="onShowRobots()">
                                <img src="{{ url_for('static', filename='icons/settings-svgrepo-com.svg') }}" class="icon"/>
                            </button>
                        </div>
                        {% endif %}
                    </div>
                    {% endif %}
                    {% if not current_thread %}
                    <div class="robot-select" id="robot-select">
                        <button onclick="window.location.assign('{{ url_for('robot') }}')" class="robot-entry robot-entry-new">新建 &plus;</button>
                        <button onclick="window.location.assign('{{ url_for('set_robot', robot=None) }}')" class="robot-entry{% if not current_robot %} robot-entry-current{% endif %}">默认助手</button>
                        {% for robot in robots %}
                        <button onclick="window.location.assign('{{ url_for('set_robot', robot=robot.id) }}')" class="robot-entry{% if robot.id == current_robot %} robot-entry-current{% endif %}" title="{{ robot.botname }}">{{ robot.botname }}</button>
                        {% if robot.id == current_robot %}
                        <button onclick="window.location.assign('{{ url_for('robot', robot=current_robot) }}')" class="robot-entry robot-entry-edit">编辑</button>
                        {% endif %}
                        {% endfor %}
                    </div>
                    {% endif %}
                </div>
                <form id="message-form" action="{% if phase != 'idle' %}/stop_generating{% else %}/send_message{% endif %}" method="post" class="input-container"{% if phase == 'idle' %} onsubmit="return checkEmpty()"{% endif %}>
                    {% if current_robot %}
                    <input type="text" name="robot" id="current-robot" class="hidden" value="{{ current_robot }}" autocomplete="off"/>
                    {% endif %}
                    {% if current_thread %}
                    <input type="text" name="thread" id="current-thread" class="hidden" value="{{ current_thread }}" autocomplete="off"/>
                    {% endif %}
                    {% if phase != 'idle' %}
                    <textarea type="text" name="query" id="message-input" class="message-input" autocomplete="off" tabindex="-1" disabled placeholder="思考中..."></textarea>
                    {% else %}
                    <textarea type="text" name="query" id="message-input" class="message-input" autocomplete="off" tabindex="1" autofocus placeholder="输入你的问题..."></textarea>
                    {% endif %}
                    <button type="submit" class="{% if phase != 'idle' %}stop-button{% else %}send-button{% endif %}">
                        {% if phase != 'idle' %}
                        <img src="{{ url_for('static', filename='icons/stop-circle-svgrepo-com.svg') }}" class="icon"/>
                        {% else %}
                        <img src="{{ url_for('static', filename='icons/send-alt-1-svgrepo-com.svg') }}" class="icon"/>
                        {% endif %}
                    </button>
                </form>
            </div>
            <div id="menu-content" class="menu-content">
                <div class="thread-select">
                    <button onclick="window.location.assign('{{ url_for('index') }}')" class="thread-entry thread-entry-new">新对话 &plus;</button>
                    {% for thread in threads %}
                    <button onclick="window.location.assign('{{ url_for('index', thread=thread.id) }}')" class="thread-entry{% if thread.id == current_thread %} thread-entry-current{% endif %}" title="{{ thread.title }}">{{ thread.title }}</button>
                    {% endfor %}
                </div>
            </div>
        </div>
        <script>const div = document.getElementById('chat-box'); div.scrollTop = div.scrollHeight;</script>
        <script>
var current_thread = {% if current_thread %} {{ current_thread|tojson }} {% else %} undefined {% endif %};
var choices_ready = {{ choices_ready|tojson }};
var phase = {{ phase|tojson }};
        </script>
        <script src="{{ url_for('static', filename='js/index.js') }}"></script>
        <script>
function checkEmpty() {
    const input = document.getElementById("message-input");
    return input.value.trim() !== '';
}
function onTileClick() {
    const content = document.getElementById("menu-content");
    content.style.width = content.offsetWidth !== 0 ? '0' : '36%';
}
function onShowRobots() {
    const content = document.getElementById("robot-select");
    content.style.height = content.offsetHeight !== 0 ? '0' : '36%';
}
        </script>
    </body>
</html>
